<template>
  <div>
    <input autocomplete="off" placeholder="输入关键字进行过滤" rows="2" class="di-input" name="query" validateevent="true" v-model="filterData"  type="text"/>
    <thous-tree ref="tree1" :multiplecheck="true" :data="treeData" @node-click="nodeclick" :filter-key="filterData" :button="true" :tpl="tpl" :multiple="true"></thous-tree>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        filterData: '',
        treeData: [{
          title: '一级节点',
          expanded: false,
          children: [{
            title: '二级节点v',
            expanded: false,
            children: [{
              title: '三级节点',
              chkDisabled: true
            }, {
              title: '三级节点'
            }, {
              title: '三级节点'
            }]
          }, {
            title: '二级节点',
            expanded: false,
            children: [{
              title: '三级节点2-1'
            }, {
              title: '三级节点2-2'
            }]
          }]
        }, {
          title: 'cccc'
        }]
      }
    },
    watch: {
      filterData (val) {
        console.log(this.filterData, '哇')
      }
    },
    methods: {
      tpl (node, ctx) {
        return <span>
        <button class='di-button' onClick={() => this.$refs.tree1.addNode(ctx, node)}>+</button>
        <span domPropsInnerHTML={node.title} onClick={() => {
          ctx.parent.nodeSelected(ctx.props.node)
          console.log(ctx.parent.getSelectedNodes())
        }}></span>
        <button class='di-button' onClick={() => this.$refs.tree1.delNode(node.parent, node)}>-</button>
        </span>
      },
      nodeclick: function (data) {
        console.log(data, '点击事件')
      },
      toggle: function () {
        this.closed = !this.closed
      }
    }
  }
</script>
<style>
  .di-input{
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100%;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    height: 40px;
    line-height: 1;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
</style>
